<!DOCTYPE html>
<html>
<head>
    <title>Physics Graph Reproduction</title>
</head>
<body>
<canvas id="physicsGraphCanvas" width="750" height="520"></canvas>

<script>
    const canvas = document.getElementById('physicsGraphCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas with a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --- Configuration ---
    const margin = { top: 40, right: 30, bottom: 90, left: 70 };
    const graphWidth = canvas.width - margin.left - margin.right;
    const graphHeight = canvas.height - margin.top - margin.bottom;

    const tMin = 0, tMax = 9;
    const vMin = 0, vMax = 40;
    
    // --- Coordinate Mapping Functions ---
    function mapX(t) {
        return margin.left + ((t - tMin) / (tMax - tMin)) * graphWidth;
    }

    function mapY(v) {
        return margin.top + graphHeight - ((v - vMin) / (vMax - vMin)) * graphHeight;
    }

    // --- Drawing Functions ---

    // 1. Draw Grid
    function drawGrid() {
        ctx.strokeStyle = '#b0b0b0'; // A medium gray for all grid lines

        // Vertical lines (every 0.2s)
        for (let i = 0; i <= 45; i++) {
            const t = i * 0.2;
            ctx.beginPath();
            ctx.lineWidth = (i % 5 === 0) ? 1.2 : 0.5; // Thicker for major lines
            ctx.moveTo(mapX(t), mapY(vMin));
            ctx.lineTo(mapX(t), mapY(vMax));
            ctx.stroke();
        }

        // Horizontal lines (every 2mV)
        for (let i = 0; i <= 20; i++) {
            const v = i * 2;
            ctx.beginPath();
            ctx.lineWidth = (i % 5 === 0) ? 1.2 : 0.5; // Thicker for major lines
            ctx.moveTo(mapX(tMin), mapY(v));
            ctx.lineTo(mapX(tMax), mapY(v));
            ctx.stroke();
        }
    }
    
    // 2. Draw Labels and Titles
    function drawLabels() {
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // X-axis labels
        ctx.font = '16px Arial';
        for (let t = 0; t <= tMax; t++) {
            ctx.fillText(t.toString(), mapX(t), mapY(0) + 15);
        }

        // Y-axis labels
        ctx.textAlign = 'right';
        for (let v = 0; v <= vMax; v += 10) {
             ctx.fillText(v.toString(), mapX(0) - 10, mapY(v));
        }

        // Y-axis Title: V_H / mV
        let currentX = margin.left - 50;
        const yTitleY = mapY(20);
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';

        ctx.font = 'italic 20px Arial';
        ctx.fillText('V', currentX, yTitleY);
        currentX += ctx.measureText('V').width;

        ctx.font = '14px Arial'; // Subscript
        ctx.fillText('H', currentX, yTitleY + 7);
        currentX += ctx.measureText('H').width;
        
        ctx.font = '20px Arial'; // Reset font
        ctx.fillText(' / mV', currentX, yTitleY);
        
        // X-axis Title: t / s
        const xTitleX = canvas.width / 2;
        const xTitleY = canvas.height - margin.bottom + 40;
        ctx.textAlign = 'right';
        ctx.font = 'italic 20px Arial';
        ctx.fillText('t', xTitleX, xTitleY);
        
        ctx.textAlign = 'left';
        ctx.font = '20px Arial';
        ctx.fillText(' / s', xTitleX, xTitleY);

        // Figure Caption
        ctx.font = 'bold 18px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 6.1', canvas.width / 2, canvas.height - 25);
    }
    
    // 3. Draw the Data Plot
    function drawPlot() {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;
        
        ctx.moveTo(mapX(0), mapY(0));
        ctx.lineTo(mapX(3.5), mapY(36));
        ctx.lineTo(mapX(7.0), mapY(36));
        ctx.lineTo(mapX(8.5), mapY(0));
        
        ctx.stroke();
    }

    // --- Execution ---
    drawGrid();
    drawLabels();
    drawPlot();

</script>
</body>
</html>